<template>
<div id="app">
	<el-container class="container">
		<el-header class="header">MyRpc可视化测试中心</el-header>
		<el-container>
			<el-aside width="200px" class="aside">
				<el-menu :router="true" default-active="servicelist">
					<el-menu-item v-for="item in menuItems" :key="item.id" :index="item.url">
						<span>{{ item.text }}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main class="main"><router-view></router-view></el-main>
		</el-container>
	</el-container>
</div>
</template>

<script>


export default {
	name: 'App',
	data() {
		return {
			menuItems: [
				{id: 0, text: '服务列表', url: 'servicelist'},
				{id: 1, text: '注册中心预览', url: 'registrycenter'},
				{id: 2, text: '服务调用展示', url: 'interfacetest'},
				{id: 3, text: '自动化测试结果', url: 'autotest'}
			]
		}
	},
	methods: {
		selectMenu(index) {
			console.log(index);
		}
	}
}
</script>

<style>
#app {
	height: 100%;
}

.container {
	height: 100%;
}

.header {
	height: 60px;
	text-align: center;
	line-height: 60px;
	background-color: #409EFF;
}
.aside {
	border: 1px solid #f3f4f5;
}
.main {
	border: 1px solid #f3f4f5;
}

.link {
	text-decoration: none;
}
</style>
